<template>
<div class="dd">
    <div class="box-body">
        <table class="table table-bordered" v-for="(table,index) in tableData">
            <thead>
                <tr>
                    <th :width="th.width" v-for="th in thOpt">{{th.name}}</th>
                </tr>
            </thead>
            <tbody>
                <tr style="text-align:center">
                    <td rowspan="2" style="vertical-align: middle;text-align: center;">{{index+1}}</td>
                    <td rowspan="2" style="vertical-align: middle;text-align: center;"><a  target="_blank" class="resumePeo" @click="targetLeaderRoute(table.emplid)">{{table.name}}</a></td>
                    <td v-for="tdName in tdOpt">
                        {{handleData(table,tdName)}}
                    </td>
                </tr>
                <tr>
                    <!-- <td colspan="11">{{table.exresumes}}</td> -->
                    <td colspan="11" style="text-align:left">
                        <!--<span v-for="(ex,i) in table.exresumes">
                            <span style="display:inline-block;width:120px;margin:0 0 10px;">
                                {{ex.c_begin_dt_desc}}--{{ex.c_end_dt_desc}}
                            </span>
                            {{ex.comments}}</br>
                        </span>-->
                        
                        <div v-html="table.c_leader_resume" style="line-height:28px;font-size:16px;">
                        	
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</template>
<script>
import Vue from 'vue'
import { Row,  Select,Option,Table,TableColumn,Button} from 'element-ui' 
Vue.use(Button);
Vue.use(Select);
Vue.use(Row);
Vue.use(Option);
Vue.use(Table);
Vue.use(TableColumn);
  export default {
    data() {
      return {
     
          thOpt:[{
              name:'序号',
              width:60
          },{
              name:'名字',
              width:70 
          },{
              name:'性别',
              width:80
          },{
              name:'职务',
              width:100
          },{
              name:'出生日期',
              width:110
          },{
              name:'年龄',
              width:70
          },{
              name:'政治面貌',
              width:100
          },{
              name:'员工身份',
              width:100
          },{
              name:'出生地',
              width:100
          },{
              name:'学历学位',
              width:100
          },{
              name:'毕业院校',
              width:130
          },{
              name:'专业',
              width:100
          },{
              name:'现任职时间',
              width:120
          }],
          tdOpt:['sex_descr',
                'position_desc',
                'birthdate',
                'age',
                'political_sta_chn',
                'c_leader_ident',
                'birthplace',
                'highest_deg',
                'school_descr',
                'major_descr',
                'org_inst_srv_dt'
                ],
          tdOpts:['exresumes'],

      }
    },
    computed:{
        uploadUrl : function(){
            var params = {
                leaderType:this.leaderType,
                search:this.searchText,
                principal:this.principal,
                backSeat:this.backSeat,
                tuiyang:this.tuiyang
            }
            return this.Axios.baseURI +'/excel/detailExecutiveExport?'+ this.concatStr(params);
        }
    },
    methods: {
        showColList:function(){
            this.colShow = this.colShow ? false : true;
        },
        getCheckedArr:function(value){
          var arr = []
          value.sort(function(a,b){
              return a - b;
          });
          console.log(value);
          console.log(this.colTotalList);
          for (var i=0;i<value.length;i++) {
              arr.push(this.colTotalList[1+Number(value[i])]);          
          }
          console.log(arr);
          this.tableOption = JSON.parse(JSON.stringify(arr));
        },
        targetLeaderRoute:function(emplid){
          window.open( "/module/leaderAppoint.html?emplid="+emplid);
        },
		handleData:function(table,tdName){
            if (tdName === "org_inst_srv_dt") {
                
                var date = table[tdName].split(" ")[0];
                var arr = date.split("-");
                return arr[0] + "年" + arr[1] + "月";
            }  else if (tdName === "age") {
                return  new Date().getFullYear() - table['birthdate'].substring(0,4);
            } else {
                return table[tdName]
            }
        }
    },

    mounted: function () {    
    //   let self = this;
    //     let para = {
    //             leaderType:this.leaderType,
    //             search:'',
    //             principal:'',
    //             backSeat:'',
    //             tuiyang :'',
    //             leaderUnit:''
    //         };
    //     this.Axios.Post(this.URL.getGroupByCondition.url,para)
    //         .then(function(res){
    //             self.tableData = res.data.datas.dataList;
    //             var myTime = new Date();
    //             var iYear = myTime.getFullYear();//获取当前年份
    //             for(var i=0;i<self.tableData.length;i++){//截取字符串
    //                 self.tableData[i].birthdate=self.tableData[i].birthdate.substring(0,10);
    //                 self.tableData[i].org_inst_srv_dt=self.tableData[i].org_inst_srv_dt.substring(0,10);
    //                 self.tableData[i].age= iYear - self.tableData[i].birthdate.substring(0,4);//年龄
    //             }
    //         }) 
    },



    beforeDestroy: function () {
      window.getFlowProcessFrom = null;
      window.getFlowProcessApplyFrom = null;
      window.getFlowProcessApprovedFrom = null;
    },
    components: {

    },
    props:['leaderType','searchText','principal',"backSeat","tuiyang",'tableData']
  }

</script>

<style scoped>

</style>
<style>
.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
    background-color:#fff;
}
.box-body table {
    border-spacing: 0;
    border-collapse: collapse;
}
.box-body .table-bordered {
    border: 1px solid #EBEBEB;
}
.box-body .table > thead > tr > th{
    line-height: 1.42857;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}
.box-body .table > thead > tr > th{
    border-bottom:1px solid #DDD;
}
.box-body .table-bordered > thead > tr > th{
    border:1px solid #e7e7e7;
}
.box-body .table-bordered > thead > tr > th{
    background-color:#f5f5f6;
}
/*td*/
.box-body .table > tbody > tr > td{
    border-top: 1px solid #e7eaec;
    line-height: 1.42857;
    padding: 8px;
    background-color:#fff;
}
.box-body tbody > tr > td{
    border:1px solid #e7e7e7;
}
.box-body .table td{
    box-sizing: border-box;
}
.box-body .table > tbody > tr > td{
    border-top: 1px solid #e7eaec;
    line-height: 1.42857;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}
/* 导出详表 */
.box-body .handle-table{  
      clear: both;
      padding:20px 20px 30px 20px;
      border-bottom: 1px solid #dfe6ec;
    }
.box-body .selectSet{
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      position: relative;
      clear: both;    
    }
.box-body .selectSet .default{
      float: left;
      background-color: #f4f4f4;
      color: #444;
      padding: 6px 12px;
      border: 1px solid #ddd;
      border-radius: 3px;
      position: relative;
      z-index:1;
    }
.box-body .selectSet .alt{
      margin-right:-1px; 
    }
.box-body .isHide{
      display:none;   
    }
.box-body .selectSet a:hover{
      z-index:4;  
      color: #333;
      background-color: #e6e6e6;
      border-color: #adadad;
      cursor:pointer;
    }
.box-body .selectSet .alt{
      margin-right:-1px;
    }
.box-body .selectSet .default:first-child:not(:last-child){
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;       
    }
.box-body .selectSet .default:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
.box-body .downloadTable{
      padding: 7px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      background-color: #00acd6;
      border-color: #269abc;
      color: #fff;
      border-radius: 3px;
      display:inline-block;
    }
.box-body .downloadTable:hover{
      background-color: #3c8dbc;
      border-color: #00acd6;
      color:#fff;
    }  
.box-body .caret {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: 2px;
      vertical-align: middle;
      border-top: 4px dashed;
      border-top: 4px solid \9;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
  }
 .box-body .resumePeo{
    color: #00acd6;
    cursor: pointer;
}
</style>
